import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';

export const formStyle = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
});

export const controlBox = style({
	position: 'relative',
	padding: '0.5em',
	marginTop: '2em',
	selectors: {
		'&:hover': {
			outline: `2px solid ${vars.color.selection}`,
		},
		'&:focus-within,&.popup-menu': {
			outline: `2px solid ${vars.color.accent}`,
		},
	},
});

export const controlMenu = style({
	display: 'flex',
	alignItems: 'center',
	position: 'absolute',
	left: '0.2em',
	top: '-2em',
	height: '2em',
	opacity: 0,
	pointerEvents: 'none',
	// transition: 'opacity 0.2s',
	background: vars.color.accent,
	padding: '0.3em',
	borderTopLeftRadius: '5px',
	borderTopRightRadius: '5px',
	color: 'white',
	userSelect: 'none',
});

globalStyle(`${controlMenu} svg`, {
	fontSize: '1.5em',
	fill: 'white',
});

globalStyle(`${controlBox}:where(:focus-within,.popup-menu)  ${controlMenu}`, {
	pointerEvents: 'auto',
	opacity: 1,
});
